{% extends "base.html" %}
{% import "page.html" as page %}
{% block content %}
    <div id="permission_list" class="content-wrapper list">
        <section class="content-header">
            <h1>
                权限管理
                <small>
                    默认每页显示25条数据
                </small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url_for('index.index') }}"><i class="fa fa-dashboard"></i> Home</a></li>
                <li> 权限管理</li>
                <li class="active"> 权限列表</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            权限列表
                            <button type="button" class="btn btn-primary btn-sm" style="float:right;margin-top:-5px"
                                    data-target=".add-permission-modal" data-toggle="modal">增加权限
                            </button>
                            <div class="modal fade add-permission-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">增加权限</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="inputPermissionName"
                                                           class="col-sm-2 control-label">权限名称</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="inputPermissionName"
                                                               placeholder="权限名称" v-model="permission_name">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="inputPermissionAliasName"
                                                           class="col-sm-2 control-label">权限说明</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="inputPermissionAliasName" placeholder="权限说明"
                                                               v-model="permission_alias_name">
                                                    </div>
                                                </div>
                                            </form>
                                            <div style="color:red;text-align:center" v-if="errMsg"
                                                 v-text="errMsg"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="add_permission()">提交
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>权限名称</th>
                                        <th>权限说明</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="permission_list">
                                    {% for permission in permissions %}
                                        <tr>
                                            <td>{{ permission.name }}</td>
                                            <td>{{ permission.alias_name }}</td>
                                            <td><span class="label label-success"
                                                      style="margin-right:10px;cursor:pointer" data-toggle="modal"
                                                      @click="modify_perms_id='{{ permission.id }}',modify_perms_name='{{ permission.name }}',modify_alias_name='{{ permission.alias_name }}'"
                                                      data-target=".modify-perms-modal">修改</span><span
                                                    class="label label-danger" style="margin-right:10px;cursor:pointer"
                                                    @click="show_delete_perms_modal('{{ permission.id }}')">删除</span>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% if pagination %}
                                <div class="pagination" style="float:right">
                                    {{ page.pagination_widget(pagination,"user.user_permission") }}
                                </div>
                            {% endif %}
                            <div class="modal fade delete-perms-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel4" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel4">删除权限</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label style="text-align: center" class="col-sm-5 control-label">确认是否删除该权限?</label>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="delete_perms()">删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade modify-perms-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel2" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel2">修改权限信息</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="modifyPermsName"
                                                           class="col-sm-2 control-label">权限名称</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="modifyPermsName"
                                                               placeholder="权限名称" v-model="modify_perms_name">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="modifyAliasName"
                                                           class="col-sm-2 control-label">权限说明</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="modifyAliasName"
                                                               placeholder="权限说明" v-model="modify_alias_name">
                                                    </div>
                                                </div>
                                            </form>
                                            <div style="color:red;text-align:center" v-if="errMsg"
                                                 v-text="errMsg"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="modify_perms()">修改
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}
{% block bottom_js %}
    <script>
        window.onload = function () {
            if (({{ menu|tojson }}) in {
                'user_list': '',
                'role_list': '',
                'permission_list': ''
            }) {
                $('#permission_manage').addClass('active').addClass('menu-open');
            } else {
                $('#permission_manage').removeClass('active').removeClass('menu-open');
            }
        };
        data = {
            permission_name: '',
            permission_alias_name: '',
            modify_perms_id: '',
            modify_perms_name: '',
            modify_alias_name: '',
            errMsg: '',
        };
        new Vue({
            el: '.list',
            data: data,
            methods: {
                add_permission: function () {
                    add_permission(this.permission_name, this.permission_alias_name);
                },
                show_delete_perms_modal: function (permission_id) {
                    this.permission_id = permission_id;
                    $('.delete-perms-modal').modal('show');
                },
                delete_perms: function () {
                    delete_perms(this.permission_id);
                },
                modify_perms: function () {
                    perms_id = this.modify_perms_id;
                    perms_name = this.modify_perms_name;
                    alias_name = this.modify_alias_name;
                    modify_perms(perms_id, perms_name, alias_name);
                },
            }
        });

        function delete_perms(permission_id) {
            $.ajax({
                url: "{{url_for('api_user.api_user_permission')}}",
                data: {'permission_id': permission_id},
                timeout: 10000,
                type: 'post',
                success: function (response) {
                    console.log(response);
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '删除成功',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.delete-perms-modal').modal('hide');
                    } else {
                        swal({
                            type: 'error',
                            title: '删除失败',
                            showConfirmButton: true
                        })
                    }
                },
                error: function (xhr) {
                    swal({
                        type: 'error',
                        title: '删除失败',
                        showConfirmButton: true
                    })
                }
            })
        }

        function modify_perms(perms_id, perms_name, alias_name) {
            if ($.trim(perms_name).length === 0) {
                data.errMsg = '部门名称不能为空！';
                return;
            }
            $.ajax({
                url: "{{url_for('api_user.api_user_permission')}}",
                data: {
                    'permission_id': perms_id,
                    'permission_name': $.trim(perms_name),
                    'permission_alias_name': $.trim(alias_name),
                },
                timeout: 10000,
                type: 'post',
                success: function (response) {
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '修改成功',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.modify-perms-modal').modal('hide');
                    } else {
                        swal("修改失败", response.errMsg, "error");
                    }
                },
                error: function (response) {
                    $.notify({
                            title: "<strong>权限修改错误:</strong><br>",
                            message: response.responseText
                        },
                        {
                            type: 'danger',
                            delay: 3600000
                        });
                }
            })
        }

        function add_permission(permission_name, permission_alias_name) {
            if (permission_name === '') {
                data.errMsg = '权限名称不能为空！';
                return;
            }
            if (permission_alias_name === '') {
                data.errMsg = '权限说明不能为空！';
                return;
            }
            $.ajax({
                url: "{{url_for('api_user.api_user_permission')}}",
                data: {
                    'permission_name': permission_name,
                    'permission_alias_name': permission_alias_name,
                },
                timeout: 10000,
                type: 'post',
                success: function (response) {
                    console.log(response);
                    if (response.resCode === -1) {
                        swal(
                            "添加权限出错", response.errMsg, "error"
                        )
                    } else {
                        swal({
                            type: 'success',
                            title: '添加成功',
                            showConfirmButton: true,
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.add-permission-modal').modal('hide');
                    }
                }
            })
        }
    </script>
{% endblock %}
